<template >
  <Dialog v-model="dialogVisible" title="售后退款" width="800px">
    <el-descriptions title="订单信息">
      <el-descriptions-item label="商品名称: ">{{skuInfo.spuName}}</el-descriptions-item>
      <el-descriptions-item label="商品面值: ">{{ skuInfo.denomination }}</el-descriptions-item>
      <el-descriptions-item label="数量: ">{{ skuInfo.count }}</el-descriptions-item>
      <el-descriptions-item label="商品单价: ">{{ skuInfo.itemNominalValue/100}} {{ skuInfo.currencyCode}}</el-descriptions-item>
      <el-descriptions-item label="实付金额: " v-if="orderInfo">{{ orderInfo.paymentPrice / 100 }} {{ orderInfo.paymentCurrency}}</el-descriptions-item>
      <el-descriptions-item label="发货方式: ">
        <el-tag v-if="skuInfo.deliveryMethod === EnumDeliveryMethodType.AUTOMATIC">自动</el-tag>
        <el-tag v-if="skuInfo.deliveryMethod === EnumDeliveryMethodType.MANUAL">手动</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="接受邮箱: ">{{ skuInfo.receiveEmail }}</el-descriptions-item>
    </el-descriptions>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="退款原因" prop="applyReason">
        <el-input
          v-model="formData.applyReason"
          :autosize="{ minRows: 3, maxRows: 3 }"
          :clearable="true"
          :show-word-limit="true"
          style="width:100%;"
          placeholder="请输入备注"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="退款原因" prop="applyPicUrls">
        <UploadImgs v-model="formData.applyPicUrls" />
      </el-form-item>
    </el-form>
    <div style="text-align:center;">
      <el-button :loading="formLoading" type="primary" @click="submitForm">
        确定退款
      </el-button>
      <el-button @click="close">返回</el-button>
    </div>
  </Dialog>
  <Dialog v-model="cardKeyDataVisible" title="预览卡密" width="600px">
    <el-table :data="previewCardkeyData" style="width: 100%">
      <el-table-column property="cardNumber" label="卡号" width="280" />
      <el-table-column property="code" label="密码" width="130" />
      <el-table-column property="pin" label="pin码" />
    </el-table>
  </Dialog>
</template>

<script setup >
import {EnumDeliveryMethodType} from "@/config/spu";
import {create as createAfterSaleOrder} from '@/api/mall/trade/afterSale/index';
defineOptions({ name: 'TradeOrderSendCardKeyForm' })
const emit = defineEmits(['auditSuccess'])
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const cardKeyDataVisible = ref(false) // 弹窗的是否展示
const previewCardkeyData = ref([]);
const formRef = ref();
const formLoading = ref(false);
const formData = ref({
  applyPicUrls: [],
  applyReason: ""
});
const rules = reactive({
});

const props = defineProps({
  orderInfo: {
    type: Object,
    default() {
      return null;
    }
  }
});

const skuInfo = computed(()=> {
  if(props.orderInfo) {
    return props.orderInfo.items[0];
  }

  return {};
});

const open = () => {
  dialogVisible.value = true
}

const validate = async () => {
  if (!formRef) return
  try {
    await unref(formRef)?.validate()
  } catch (e) {
    formLoading.value = false;
    message.error('必填字段项不完整，请输入后提交')
    throw e // 目的截断之后的校验
  }
}

const close = ()=> {
  formLoading.value = false;
  dialogVisible.value = false;
}

const submitForm = async ()=> {
  formLoading.value = true

  // 校验表单数据
  await validate();

  createAfterSaleOrder({
    orderItemId: props.orderInfo.items[0].id,
    applyReason: formData.value.applyReason,
    applyPicUrls: formData.value.applyPicUrls
  }).then(()=> {
    message.success("操作成功");
    dialogVisible.value = false;
    emit("auditSuccess");
  }).catch(e=> {
    formLoading.value = false;
  });
}

defineExpose({ open })
</script>

<style lang="less" scoped>

</style>
